<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>网上花店</title>

</head>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./js/swiper-3.4.2.min.css">
<link rel="stylesheet" href="./css/swiper.css">
<link rel="stylesheet" href="./js/animate.min.css">
<link rel="stylesheet" href="./css/all.css">
<link rel="stylesheet" href="./css/global.css">
<link rel="stylesheet" href="./js/layui.css">

<body class="set-bg">
  <div class="top-bar">
    <div class="banner">
      <span class="left">欢迎访问在线商城</span>
      <span class="right">
        <a href="#" id="search"><i class="iconfont icon-search"></i></a>
        <a href="./card.html"><i class="iconfont icon-cart"></i></a>
        <a href="./login.html"><i class="iconfont icon-user"></i></a>
      </span>
    </div>
    <div class="searchBox">
      <div class="layui-form-item" style="margin: 0;">
        <div class="layui-input-block flex-box" style="margin: 0;">
          <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字" autocomplete="off"
            class="layui-input">
          <button onclick="redirect()" class="layui-btn layui-btn-normal" style="margin-left: 10px;">搜索</button>
        </div>
      </div>
    </div>
  </div>
  <header>
    <ul class="nav">
      <li><i class="iconfont icon-shouye" style="font-size: 20px;"></i><a href="./index.html">商城首页</a></li>
			<li><i class="iconfont icon-suoyou" style="font-size: 20px;"></i><a href="./all.html">所有商品</a></li>
			<li><i class="iconfont icon-liuyanpinglun" style="font-size: 20px;"></i><a href="./leave_message.html">留言</a></li>
			<li><i class="iconfont icon-guanyu" style="font-size: 20px;"></i><a href="./diary.html">养花日记</a></li>
			<!-- <li><i class="iconfont icon-liuyanpinglun"></i><a href="#">待定</a></li> -->
    </ul>
  </header>

  <div class="banner wow slideInRight" data-wow-duration="1s" data-wow-delay="0s">
    <div class="pic">
      <img src="./img/new-flower/10.webp" alt="未加载">
    </div>
  </div>

  <div class="category wow slideInLeft" data-wow-duration="1s" data-wow-delay="0s">
    <div class="left" >
      <a href="#"><span>盆栽</span></a>
      <a href="#"><span>玻璃瓶植物</span></a>
      <a href="#"><span>水培</span></a>
      <a href="#"><span>绿植</span></a>
      <a href="#"><span>盆景</span></a>
      <a href="#"><span>大叶盆景</span></a>
      <a href="#"><span>小型盆栽</span></a>
      <a href="#"><span>盆花</span></a>
      <a href="#"><span>微景观</span></a>
      <a href="#"><span>多肉微盆栽</span></a>
      <a href="#"><span>苔藓微景观</span></a>
      <a href="#"><span>微地形景观</span></a>
    </div>
    <div class="right">
      <div class="lpic wow slideInUp" data-wow-duration="1s" data-wow-delay="0">
        <a href="#"><img src="./img/cate/1.jpg" alt="ddd" height="100%"></a>
      </div>
      <div class="rpic">
        <a href="#" class="wow flipInX" data-wow-duration="1s" data-wow-delay="0"><img src="./img/cate/2.jpg" alt="ddd" width="240px" height="140px"></a>
        <a href="#" class="wow flipInX" data-wow-duration="1s" data-wow-delay="0.2s"><img src="./img/cate/3.jpg" alt="ddd" width="240px" height="140px"></a>
        <a href="#" class="wow flipInX" data-wow-duration="1s" data-wow-delay="0.4s"><img src="./img/cate/4.jpg" alt="ddd" width="240px" height="140px"></a>
        <a href="#" class="wow flipInX" data-wow-duration="1s" data-wow-delay="0.6s"><img src="./img/cate/5.jpg" alt="ddd" width="240px" height="140px"></a>
        <a href="#" class="wow flipInX" data-wow-duration="1s" data-wow-delay="0.8s"><img src="./img/cate/2.jpg" alt="ddd" width="240px" height="140px"></a>
        <a href="#" class="wow flipInX" data-wow-duration="1s" data-wow-delay="1s"><img src="./img/cate/4.jpg" alt="ddd" width="240px" height="140px"></a>
      </div>
    </div>
  </div>
  <div class="saying">
    <p class="main">
      <span>植物是有灵性的、有生命的，</span>

      <span>植物之间存在着一种神秘的场——生物场。</span>

      <span>古代风水学认为：</span>

      <span>“草木郁茂，吉气相随”，</span>

      <span>“木盛则生”，</span>

      <span>“益木盛则风生也”。</span>

      <span>这也是为什么中国古典园林虽小</span>

      <span>却绿荫满庭、花木芬芳的原因。</span>
    </p>
  </div>
  <div class="content">
    <div class="second-header" style="width: 1190px; margin: 0 auto;margin-top: 25px;">
      <h2>所有商品</h2>
    </div>
    <ul class="all-goods">
      <li class="wow slideInDown" data-wow-duration="1s" data-wow-delay="0s" data-wow-offset="0">
        <a href="./order.html" style="display: block;">
          <figure>
            <img src="./img/cate/1.webp" alt="555" width="232px">
            <figcaption>
              <span class="name">植物花卉1</span>
              <span class="price">￥ 6000</span>
            </figcaption>
          </figure>
        </a>
      </li>
      <li class="wow slideInDown" data-wow-duration="1s" data-wow-delay="0.1s" data-wow-offset="0">
        <a href="./order.html" style="display: block;">
          <figure>
            <img src="./img/cate/2.webp" alt="555" width="232px">
            <figcaption>
              <span class="name">植物花卉1</span>
              <span class="price">￥ 6000</span>
            </figcaption>
          </figure>
        </a>
      </li>
      <li class="wow slideInDown" data-wow-duration="1s" data-wow-delay="0.2s" data-wow-offset="0">
        <a href="./order.html" style="display: block;">
          <figure>
            <img src="./img/cate/3.webp" alt="555" width="232px">
            <figcaption>
              <span class="name">植物花卉1</span>
              <span class="price">￥ 6000</span>
            </figcaption>
          </figure>
        </a>
      </li>
      <li class="wow slideInDown" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0">
        <a href="./order.html" style="display: block;">
          <figure>
            <img src="./img/cate/4.webp" alt="555" width="232px">
            <figcaption>
              <span class="name">植物花卉1</span>
              <span class="price">￥ 6000</span>
            </figcaption>
          </figure>
        </a>
      </li>
      <li class="wow slideInDown" data-wow-duration="1s" data-wow-delay="0.4s" data-wow-offset="0">
        <a href="./order.html" style="display: block;">
          <figure>
            <img src="./img/cate/5.webp" alt="555" width="232px">
            <figcaption>
              <span class="name">植物花卉1</span>
              <span class="price">￥ 6000</span>
            </figcaption>
          </figure>
        </a>
      </li>
      
      <li class="wow slideInUp" data-wow-duration="1s" data-wow-delay="0.5s" data-wow-offset="0">
        <a href="./order.html" style="display: block;">
          <figure>
            <img src="./img/cate/2.webp" alt="555" width="232px">
            <figcaption>
              <span class="name">植物花卉1</span>
              <span class="price">￥ 6000</span>
            </figcaption>
          </figure>
        </a>
      </li>
      <li class="wow slideInUp" data-wow-duration="1s" data-wow-delay="0.2s" data-wow-offset="0">
        <a href="./order.html" style="display: block;">
          <figure>
            <img src="./img/cate/3.webp" alt="555" width="232px">
            <figcaption>
              <span class="name">植物花卉1</span>
              <span class="price">￥ 6000</span>
            </figcaption>
          </figure>
        </a>
      </li>
      <li class="wow slideInUp" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0">
        <a href="./order.html" style="display: block;">
          <figure>
            <img src="./img/cate/4.webp" alt="555" width="232px">
            <figcaption>
              <span class="name">植物花卉1</span>
              <span class="price">￥ 6000</span>
            </figcaption>
          </figure>
        </a>
      </li>
      <li class="wow slideInUp" data-wow-duration="1s" data-wow-delay="0.4s" data-wow-offset="0">
        <a href="./order.html" style="display: block;">
          <figure>
            <img src="./img/cate/5.webp" alt="555" width="232px">
            <figcaption>
              <span class="name">植物花卉1</span>
              <span class="price">￥ 6000</span>
            </figcaption>
          </figure>
        </a>
      </li>
      <li class="wow slideInUp" data-wow-duration="1s" data-wow-delay="0.5s" data-wow-offset="0">
        <a href="./order.html" style="display: block;">
          <figure>
            <img src="./img/cate/1.webp" alt="555" width="232px">
            <figcaption>
              <span class="name">植物花卉1</span>
              <span class="price">￥ 6000</span>
            </figcaption>
          </figure>
        </a>
      </li>
    </ul>
  </div>
  <footer style="height: 100px; background: #757575;margin-top: 20px;">

		<div class="display">
			<img src="./img/插画/1.png" alt="www" width="80px" height="80px">
			<div class="contact">
				<span>邮箱：56623265564@qq.com</span>
				<span>电话：400 6666 6666</span>
			</div>
			<img src="./img/插画/3.png" alt="www" width="80px" height="80px">
		</div>
		<!-- <div class="welcome">
			欢迎访问在线商城
		</div> -->
		<!-- <div class="profile">
			<p>本店销售各种植物花卉，如向日葵、百合、菊花、玫瑰、白百合、红玫瑰、牡丹、雏菊、郁金香、月季、康乃馨......可预订和在线购买。</p>
		</div> -->
	</footer>
  <!-- Swiper JS -->
  <script src="./js/swiper-3.4.2.min.js"></script>
  <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>

  <script src="./js/wow.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    new WOW().init();
    var swiper = new Swiper('.swiper-container', {
      loop: true,
      // autoplay:5000
    });
    $("#search").click(function (e) {

      $(".searchBox").toggle(500)
    })
    // $("body").click(function() {
    // 	$(".searchBox").hide(500)
    // })
    function redirect() {
      console.log("跳转");
      window.location.replace("./all.html");

    }
  </script>
</body>

</html>